<template>
  <div class="home  d-flex flex-column my-container">
    <!--    <div class="title-container" v-if="permersion.search">-->
    <!--      <div class="search-content">-->
    <!--        <el-form :model="searchModel" :inline="true">-->
    <!--          <el-form-item>-->
    <!--            <el-input v-model="searchModel.deviceName" placeholder="请输入设备名称" prefix-icon="el-icon-search"/>-->
    <!--          </el-form-item>-->
    <!--          <el-form-item>-->
    <!--            <el-input v-model="searchModel.deviceCode" placeholder="请输入设备编码" prefix-icon="el-icon-search"/>-->
    <!--          </el-form-item>-->
    <!--          <el-form-item>-->
    <!--            <el-button type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>-->
    <!--          </el-form-item>-->
    <!--        </el-form>-->
    <!--      </div>-->
    <!--    </div>-->
    <div class="col d-flex flex-column shadow p-3 rounded-lg">
      <div class="">
        <el-form :model="searchModel" :inline="true">
          <el-form-item>
            <el-button type="success" icon="el-icon-refresh" @click="refresh">刷新</el-button>
            <el-button type="primary" @click="toManualSetUp">手动设置</el-button>
<!--            <el-button type="primary" v-permission="'TPT_CSH'" @click="openDialog">拓扑图初始化</el-button>-->
          </el-form-item>
          <el-form-item class="float-right">
<!--            <el-button type="primary" @click="toManualSetUp">手动设置</el-button>-->
          </el-form-item>
        </el-form>
      </div>
      <div class="col d-flex over-auto">
        <el-table v-loading="tableLoading" border :data="tableData" height="100%" ref="tableRef">
          <el-table-column type="index" label="序号" width="80" align="center"/>
          <el-table-column prop="projectCode" label="项目编码" align="center">
          </el-table-column>
          <el-table-column prop="projectName" label="项目名称" align="center">
          </el-table-column>
          <el-table-column prop="mainCode" label="拓扑图编码" align="center">
          </el-table-column>
          <el-table-column prop="createByName" label="创建人" align="center"></el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" width="170">
            <template slot-scope="scope">
              {{ scope.row.createTime }}
            </template>
          </el-table-column>
          <el-table-column prop="updateByName" label="更新人" align="center"></el-table-column>
          <el-table-column label="更新时间" align="center" prop="createTime" width="170">
            <template slot-scope="scope">
              {{ scope.row.updateTime }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="250">
            <template #default="{ row }">
              <el-button type="warning" size="mini" @click="handleEdit(row)">编辑</el-button>
              <el-button type="primary" size="mini" @click="handleDetail(row)">详情</el-button>
              <el-button type="danger" size="mini" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination class="pagination" :total="count" :page.sync="page.pageIndex" :limit.sync="page.pageSize"
                  @pagination="pagination"/>
    </div>

    <!-- 弹框 -->
    <yc-dialog ref="ycDialog" :dialogTitle="dialogTitle" :centerTitle="centerTitle">
      <template #content>
        <div class="dialog-content">
          <el-form ref="loginFormRef" :rules="rules" :model="newAccountModel" label-width="90px">
            <el-form-item label="用户名称" prop="userName">

            </el-form-item>
            <el-form-item label="手机号码" prop="accountPhone">

            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" @click="dialogSave">确定</el-button>
        <el-button @click="$refs.ycDialog.dialogVisible = false">取消</el-button>
      </template>
    </yc-dialog>
  </div>
</template>

<script>
  import ycDialog from "@/components/pageDialog"
  import { queryDeviceGradeMainPage, deleteDeviceGradeMain } from "@/api/initializeVis/index.js"

  export default {
    components: {
      ycDialog
    },
    data() {
      return {
        searchModel: {
          deviceName: "",
          deviceCode: ""
        },
        tableData: [],
        page: {
          pageSize: 10,
          pageIndex: 1
        },
        count: 0,

        statusList: [
          { id: "ing", name: "处理中", type: "" },
          { id: "over", name: "成功", type: "success" },
          { id: "fail", name: "失败", type: "danger" }
        ],
        tableLoading: false,
        centerTitle: "",
        dialogTitle: "",
        newAccountModel: {
          userName: "",
          roleName: "",
          accountPhone: "",
          id: 0,
          roleCode: ""
        },
        rules: {
          userName: [{
            required: true,
            message: "请输入账号",
            trigger: "blur"
          }],
          roleCode: [{
            required: true,
            message: "请选择角色",
            trigger: "change"
          }],
          accountPhone: [{
            required: true,
            trigger: "blur",
            message: "请输入手机号码"
          }]
        }
      }
    },
    // 生命周期 - 创建完成（访问当前this实例）
    created() {

    },
    // 生命周期 - 挂载完成（访问DOM元素）
    mounted() {
      this.getTableList()
    },
    // 存放方法事件 - 会在数据变化时被调用
    methods: {
      async getTableList() {
        this.tableLoading = true
        // const { deviceName, deviceCode } = this.searchModel
        const { status, success, object, message } = await queryDeviceGradeMainPage({
          ...this.page
        })
        if (status == 200) {
          this.tableLoading = false
          this.tableData = object.data
          this.count = object.count
        }
      },
      pagination(pageItem) {
        // pageItem.page, pageItem.limit
        this.page.pageIndex = pageItem.page
        this.page.pageSize = pageItem.limit
        this.getTableList()
      },

      /**
       * 删除按钮
       */
      async handleDelete({ id, mainCode }) {
        this.$confirm("确定删除此数据吗", "删除操作", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "error",
          center: true
        }).then(async () => {
          const {
            message,
            status
          } = await deleteDeviceGradeMain({
            id, mainCode
          })
          if (status == "200") {
            this.getTableList()
            this.isGlobalMessageShow = true
            this.message = "success"
          }
        })
      },


      handleDetail(row) {
        this.$router.push({
          path: "/visControl/manualSetUp",
          query: {
            mainCode: row.mainCode
          }
        })
      },
      handleEdit(row) {
        this.$router.push({
          path: "/visControl/manualSetUp",
          query: {
            mainCode: row.mainCode
          }
        })
      },

      searchClick() {
        this.getTableList()
      },
      openDialog() {
        // this.dialogTitle = "拓扑图初始化"
        // this.centerTitle = "拓扑图初始化"
        this.addDeviceGradeInit()
        // this.$refs.ycDialog.dialogVisible = true
      },
      async addDeviceGradeInit() {
        const { status, success, object, message } = await addDeviceGradeInit()
        if (status == "200") {
          // this.list = object.data
          // this.count = object.count
          this.$message.success(message)
          this.getTableList()
        }
      },
      dialogSave() {
      },

      // 手动设置
      toManualSetUp() {
        this.$router.push({
          path: "/visControl/manualSetUp",
          query: {
            mainCode: ''
          }
        })
      },

      refresh() {
        this.searchModel = {
          deviceName: "",
          deviceCode: ""
        }
        this.getTableList()
      }
    }
  }
</script>
<style scoped lang="scss">
  .pagination {
    display: flex;
    justify-content: flex-end;
  }

  .title-container {
    display: flex;
    justify-content: flex-end;
    height: 60px;

    .search-content {
      display: flex;
    }

    .addAccount {
      margin: 10px 20px;
    }
  }
</style>
